<!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="前期配置 1.浏览器项目运行自动打开 2.eslint校验关闭  比如声明变量没有使用eslint就报错 创建vue.config.js  3.src文件夹简写方法 配置别名  这样就用@代替了src的表述了 但注意 css里 必须加~使用  4 安装 npm i --save less less-loader@5 重新封装axios 添加请求器拦截器等  请求接口api同一管理 nprogres"><meta property="og:type" content="article"><meta property="og:title" content="尚品汇Vue2项目总结"><meta property="og:url" content="https://buqingdege.gitee.io/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/vue2%E5%B0%9A%E5%93%81%E6%B1%87%E6%80%BB%E7%BB%93/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:description" content="前期配置 1.浏览器项目运行自动打开 2.eslint校验关闭  比如声明变量没有使用eslint就报错 创建vue.config.js  3.src文件夹简写方法 配置别名  这样就用@代替了src的表述了 但注意 css里 必须加~使用  4 安装 npm i --save less less-loader@5 重新封装axios 添加请求器拦截器等  请求接口api同一管理 nprogres"><meta property="og:locale"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="article:published_time" content="2022-12-23T15:09:50.247Z"><meta property="article:modified_time" content="2023-10-08T16:45:01.761Z"><meta property="article:author" content="buqingdege"><meta property="article:tag" content="Vue"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><title>尚品汇Vue2项目总结</title><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="16x16"><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="32x32"><link rel="stylesheet" href="/xujianhu/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css"><link rel="stylesheet" href="/xujianhu/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"buqingdege.gitee.io",author:"buqingdege",root:"/xujianhu/",typed_text:["buqingdege"],theme_version:"2.1.2",theme:{switch:!0,default:"style-light"},favicon:{logo:"/img/favicon.svg",icon16:"/img/favicon.svg",icon32:"/img/favicon.svg",appleTouchIcon:null,webmanifest:null,visibilitychange:!1,hidden:"/failure.ico",showText:"(/≧▽≦/)咦！又好了！",hideText:"(●—●)喔哟，崩溃啦！"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!1,plugin:{flickr_justified_gallery:"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",user_tag:"fas fa-user-alt",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!1,title:"mac",height_limit:200},toc:{post_title:!1}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2023-10-09 00:45:01"}</script><link data-swup-theme rel="stylesheet" href="/xujianhu/css/index.css?v=2.1.2" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/xujianhu/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/xujianhu/img/favicon.svg"><div class="trm-logo-text">不情<span>的歌</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="/xujianhu/" target="">主页</a></li><li class="menu-item-has-children"><a href="/xujianhu/categories/" target="">分类</a></li><li class="menu-item-has-children"><a href="/xujianhu/archives/" target="">归档</a></li><li class="menu-item-has-children"><a data-no-swup href="/xujianhu/tag/" target="">标签</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="iconfont far fa-moon"></i></div></div><form class="site-search-form"><input type="text" id="local-search-input" class="st-search-input" style="margin-bottom:0"></form><div id="local-search-result" class="local-search-result-cls"></div></div><div class="trm-menu-btn"><span></span></div></div></header><link rel="stylesheet" href="css/search.css"><script src="js/jquery.js"></script><script src="js/search.js"></script><script src="js/search_custom.js"></script><div class="trm-content-start"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="/xujianhu/img/banner.png"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font">尚品汇Vue2项目总结</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/xujianhu/" class="trm-anima-link">Home</a></li><li><span>前端开发</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar" src="/xujianhu/images/logo/avatar.jpg"></div><h5 class="trm-name trm-mb-15">不情的歌</h5><div class="trm-label">I`m <span class="trm-typed-text"></span></div></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="https://github.com" title="github" rel="nofollow" target="_blank"><i class="iconfont fab fa-github"></i> </a><a href="https://gitee.com" title="gitee" rel="nofollow" target="_blank"><i class="iconfont iconfont cg-gitee"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">地址:</div><div class="trm-label trm-label-light">火星</div></li><li><div class="trm-label">年龄:</div><div class="trm-label trm-label-light">25</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:951649211@qq.com" class="trm-btn">联系我 <i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>12/23</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>23:09</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br>buqingdege</div></div></div><div class="trm-card"><article id="article-container" class="trm-publication"><h2 id="前期配置"><a href="#前期配置" class="headerlink" title="前期配置"></a>前期配置</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223231027242.png" alt="image-20221223231027242" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>1.浏览器项目运行自动打开</p><p>2.eslint校验关闭</p><p>比如声明变量没有使用eslint就报错</p><p>创建vue.config.js</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223231245959.png" alt="image-20221223231245959" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>3.src文件夹简写方法 配置别名</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221223232834212.png" alt="image-20221223232834212" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这样就用@代替了src的表述了 但注意 css里 必须加~使用</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230112185258415.png" alt="image-20230112185258415" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>4 安装 <code>npm i --save less less-loader@5</code></p><h2 id="重新封装axios-添加请求器拦截器等-请求接口api同一管理"><a href="#重新封装axios-添加请求器拦截器等-请求接口api同一管理" class="headerlink" title="重新封装axios 添加请求器拦截器等  请求接口api同一管理"></a>重新封装axios 添加请求器拦截器等 请求接口api同一管理</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221225173159028.webp" alt="image-20221225173159028" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="nprogress进度条"><a href="#nprogress进度条" class="headerlink" title="nprogress进度条"></a>nprogress进度条</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/asd.webp" alt="asd" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i nprogress -S</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221226120207251.webp" alt="image-20221226120207251" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>可以在axios请求拦截器和响应拦截器里来操作</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> axios <span class="keyword">from</span> <span class="string">&#x27;axios&#x27;</span></span><br><span class="line"><span class="keyword">import</span>  nprogress <span class="keyword">from</span> <span class="string">&#x27;nprogress&#x27;</span>  <span class="comment">//引入</span></span><br><span class="line"><span class="keyword">import</span>  <span class="string">&#x27;nprogress/nprogress.css&#x27;</span>  <span class="comment">//nprogress 就是个文件夹包  引入样式文件</span></span><br><span class="line"><span class="comment">// nprogress.start() 进度条开始</span></span><br><span class="line"><span class="comment">// nprogress.done() 进度条结束</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> request=axios.<span class="title function_">create</span>(&#123;</span><br><span class="line">    <span class="attr">baseURL</span>:<span class="string">&#x27;/api&#x27;</span>,</span><br><span class="line">    <span class="attr">timeout</span>:<span class="number">5000</span></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加请求拦截器</span></span><br><span class="line">request.<span class="property">interceptors</span>.<span class="property">request</span>.<span class="title function_">use</span>(<span class="keyword">function</span> (<span class="params">config</span>) &#123;</span><br><span class="line">    <span class="comment">// 在发送请求之前做些什么</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//进度条开始</span></span><br><span class="line">    nprogress.<span class="title function_">start</span>()</span><br><span class="line">  </span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> config;</span><br><span class="line">  &#125;, <span class="keyword">function</span> (<span class="params">error</span>) &#123;</span><br><span class="line">    <span class="comment">// 对请求错误做些什么</span></span><br><span class="line">  </span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 添加响应拦截器</span></span><br><span class="line">request.<span class="property">interceptors</span>.<span class="property">response</span>.<span class="title function_">use</span>(<span class="keyword">function</span> (<span class="params">response</span>) &#123;</span><br><span class="line">    <span class="comment">// 2xx 范围内的状态码都会触发该函数。</span></span><br><span class="line">    <span class="comment">// 对响应数据做点什么</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//进度条结束</span></span><br><span class="line">    nprogress.<span class="title function_">done</span>()</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> response;</span><br><span class="line">  &#125;, <span class="keyword">function</span> (<span class="params">error</span>) &#123;</span><br><span class="line">    <span class="comment">// 超出 2xx 范围的状态码都会触发该函数。</span></span><br><span class="line">    <span class="comment">// 对响应错误做点什么</span></span><br><span class="line">    <span class="keyword">return</span> <span class="title class_">Promise</span>.<span class="title function_">reject</span>(error);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  </span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> request</span><br></pre></td></tr></table></figure><p>想要修改样式 修改nprogress.css文件</p><h2 id="多级目录跳转问题"><a href="#多级目录跳转问题" class="headerlink" title="多级目录跳转问题"></a>多级目录跳转问题</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221227225910738.png" alt="image-20221227225910738" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>不能使用声明式导航 会导致很卡</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221227230103172.png" alt="image-20221227230103172" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这是因为router-link 也是一个组件 三联导航几百个a链接 同时创建几百个router-link 组件会导致非常卡</p><p>所以必须用编程式导航</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221227230301159.png" alt="image-20221227230301159" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>但是使用编程式导航又有问题了 几千个导航 都绑定回调函数 那么性能也会导致很差</p><p>这个时候就想到了事件委派</p><p>如果使用事件委托又有了问题</p><p>1.如何知道点击的就是a标签？</p><p>2.如何拿到正确的数据？一级目录拿到一级目录的名和id</p><p>那就是绑定自定义属性</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230161759728.png" alt="image-20221230161759728" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>注意使用编程式导航 href要删除 否则会错乱</p><p>给a标签绑定上自定义属性</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230164132390.png" alt="image-20221230164132390" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>我们写的属性是大驼峰写法 而浏览器将我们的属性改写成了小写 所以拿数据也要拿小写的</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230163514325.png" alt="image-20221230163514325" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//导航至类目</span><br><span class="line"> gosearch(e)&#123;</span><br><span class="line">   //dataset里存着自定义属性</span><br><span class="line">   console.log(e.target.dataset);</span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230164709356.png" alt="image-20221230164709356" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>通过category几级id来分辨是几级分类</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">gosearch(e)&#123;</span><br><span class="line">   //dataset里存着自定义属性</span><br><span class="line">   //解构出对应的分类名和分类id</span><br><span class="line">   const &#123;categoryname,category1id,category2id,category3id&#125;=e.target.dataset</span><br><span class="line">   // 解决第一个问题，如何知道点击的就一定是相应的标签 只要有我们绑定的categoryname属性 那么就是a标签</span><br><span class="line">   if(categoryname)&#123;</span><br><span class="line">   //   // 解决第二个问题 如何知道点击的是几级分类 </span><br><span class="line">     let location=&#123;path:&#x27;/search&#x27;,query:&#123;&#125;&#125;</span><br><span class="line">       if(category1id)&#123;</span><br><span class="line">         location.query.categoryid=category1id</span><br><span class="line">       &#125;else if(category2id)&#123;</span><br><span class="line">         location.query.categoryid=category2id</span><br><span class="line">       &#125;else&#123;</span><br><span class="line">        location.query.categoryid=category3id</span><br><span class="line">       &#125;</span><br><span class="line">     this.$router.push(location)</span><br><span class="line">   &#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"> &#125;</span><br></pre></td></tr></table></figure><h2 id="params传参问题"><a href="#params传参问题" class="headerlink" title="params传参问题"></a>params传参问题</h2><h3 id="配置params可传可不传"><a href="#配置params可传可不传" class="headerlink" title="配置params可传可不传"></a>配置params可传可不传</h3><p>如果路由配置里已经用params参数占位了 那么不传参数就会出错 连着要到的路径都被吞了</p><p>解决办法在params参数占位后面加？ 就可以可传可不传 类似正则 ？ 代表传0次或1次</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224150440513.png" alt="image-20221224150440513" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="params参数可传可不传-如果传的参数值是空串-如何解决"><a href="#params参数可传可不传-如果传的参数值是空串-如何解决" class="headerlink" title="params参数可传可不传 如果传的参数值是空串 如何解决"></a>params参数可传可不传 如果传的参数值是空串 如何解决</h3><p>可传可不传传的是空串 那么路径也会有问题 连要到的路径都吞了</p><p>这个时候使用<code>||undefined</code>解决</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224151030649.png" alt="image-20221224151030649" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="路由的props配置"><a href="#路由的props配置" class="headerlink" title="路由的props配置"></a>路由的props配置</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221222233153930.webp" alt="image-20221222233153930" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="阻止表单默认提交事件"><a href="#阻止表单默认提交事件" class="headerlink" title="阻止表单默认提交事件"></a>阻止表单默认提交事件</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">&lt;form  class=&quot;searchForm&quot; onsubmit=&quot;return false;&quot;&gt;</span><br><span class="line">         &lt;input</span><br><span class="line">           type=&quot;text&quot;</span><br><span class="line">           id=&quot;autocomplete&quot;</span><br><span class="line">           class=&quot;input-error input-xxlarge&quot;</span><br><span class="line">           v-model.trim=&quot;keyword&quot;</span><br><span class="line">           @keyup.enter=&quot;goSearch&quot;</span><br><span class="line">         /&gt;</span><br><span class="line">         &lt;button</span><br><span class="line">           class=&quot;sui-btn btn-xlarge btn-danger&quot;</span><br><span class="line">           type=&quot;button&quot;</span><br><span class="line">           @click=&quot;goSearch&quot;</span><br><span class="line">         &gt;</span><br><span class="line">           搜索</span><br><span class="line">         &lt;/button&gt;</span><br><span class="line">       &lt;/form&gt;</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230112235424041.png" alt="image-20230112235424041" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>或者.stop防止冒泡</p><p>官网是@submit.prevent</p><h2 id="多次重复传相同参数的跳转问题"><a href="#多次重复传相同参数的跳转问题" class="headerlink" title="多次重复传相同参数的跳转问题"></a>多次重复传相同参数的跳转问题</h2><h3 id="push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告"><a href="#push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告" class="headerlink" title="push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告"></a>push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224170411007.png" alt="image-20221224170411007" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/asd.gif" alt="asd" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>多次使用编程式导航 传递的一样的参数 push replace路由跳转 就会报错navigationDuplicated（导航重复） 的错误 这一点声明式router-link 不会出现</p><p>造成的原因是push repalce 执行完毕的返回值是一个promise对象 没有给他传resolve reject 也就不能处理出错 所以</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">this</span>.<span class="property">$router</span>.<span class="title function_">push</span>(&#123;<span class="attr">name</span>:<span class="string">&#x27;search&#x27;</span>,<span class="attr">params</span>:&#123;<span class="attr">keyword</span>:<span class="variable language_">this</span>.<span class="property">keyword</span>&#125;&#125;,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;)</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221224171906843.png" alt="image-20221224171906843" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这样就解决了单词多次重复相同数据路由的错误</p><p>但这样只能解决一次 我们可以一劳永逸的解决 改写push replace</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//解决用户路由传入多次重复重复数据问题</span></span><br><span class="line"><span class="keyword">const</span> originPush=<span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">push</span>  <span class="comment">//拿到原先原型上的push方法</span></span><br><span class="line"><span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">push</span>=<span class="keyword">function</span>(<span class="params">location,resolve,reject</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(resolve&amp;&amp;reject)&#123;</span><br><span class="line">		originPush.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,resolve,reject)  <span class="comment">//如果用户传入了resolve reject 那就执行用户指定的</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		originPush.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;) <span class="comment">//如果用户没有传入resolve reject 那就执行默认的</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> originReplace=<span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">replace</span></span><br><span class="line"></span><br><span class="line"><span class="title class_">VueRouter</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">replace</span>=<span class="keyword">function</span>(<span class="params">location,resolve,reject</span>)&#123;</span><br><span class="line">	<span class="keyword">if</span>(resolve&amp;&amp;reject)&#123;</span><br><span class="line">		originRplace.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,resolve,reject)  <span class="comment">//如果用户传入了resolve reject 那就执行用户指定的</span></span><br><span class="line">	&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">		originRplace.<span class="title function_">call</span>(<span class="variable language_">this</span>,location,<span class="function">()=&gt;</span>&#123;&#125;,<span class="function">()=&gt;</span>&#123;&#125;) <span class="comment">//如果用户没有传入resolve reject 那就执行默认的</span></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h2 id="Search组件里三联导航复用的显示隐藏两种思路"><a href="#Search组件里三联导航复用的显示隐藏两种思路" class="headerlink" title="Search组件里三联导航复用的显示隐藏两种思路"></a>Search组件里三联导航复用的显示隐藏两种思路</h2><h3 id="1-通过props属性来控制在不同组件中显示的状态"><a href="#1-通过props属性来控制在不同组件中显示的状态" class="headerlink" title="1.通过props属性来控制在不同组件中显示的状态"></a>1.通过props属性来控制在不同组件中显示的状态</h3><h3 id="2-通过this-route的path-路径来控制显示隐藏"><a href="#2-通过this-route的path-路径来控制显示隐藏" class="headerlink" title="2.通过this.$route的path 路径来控制显示隐藏"></a>2.通过this.$route的path 路径来控制显示隐藏</h3><h3 id="动画过渡效果"><a href="#动画过渡效果" class="headerlink" title="动画过渡效果"></a>动画过渡效果</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230184923411.png" alt="image-20221230184923411" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230184904257.png" alt="image-20221230184904257" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20221230184843219.png" alt="image-20221230184843219" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="从搜索框与typenav两个不同地方进入search组件时参数丢失问题"><a href="#从搜索框与typenav两个不同地方进入search组件时参数丢失问题" class="headerlink" title="从搜索框与typenav两个不同地方进入search组件时参数丢失问题"></a>从搜索框与typenav两个不同地方进入search组件时参数丢失问题</h2><p>从搜索框</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230102132738713.png" alt="image-20230102132738713" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>传参了一次 但如果是我先从导航栏跳转到了search 又搜素 那么分类的参数就会丢失</p><p>如果先搜索后点击分类 那么搜索的参数也丢失了</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">// typenav.vue</span><br><span class="line"> </span><br><span class="line"> //导航至类目</span><br><span class="line">    gosearch(e) &#123;</span><br><span class="line">      //dataset里存着自定义属性</span><br><span class="line">      //如果params存在</span><br><span class="line">      if (this.$route.params) &#123;</span><br><span class="line">        //解构出对应的分类名和分类id</span><br><span class="line">        //#region</span><br><span class="line">        const &#123; categoryname, category1id, category2id, category3id &#125; =</span><br><span class="line">          e.target.dataset;</span><br><span class="line">        // 解决第一个问题，如何知道点击的就一定是相应的标签 只要有我们绑定的categoryname属性 那么就是a标签</span><br><span class="line">        if (categoryname) &#123;</span><br><span class="line">          //   // 解决第二个问题 如何知道点击的是几级分类</span><br><span class="line">          let location = &#123; name: &quot;search&quot;, query: &#123; categoryname &#125;,params:this.$route.params &#125;;</span><br><span class="line">          if (category1id) &#123;</span><br><span class="line">            location.query.categoryid = category1id;</span><br><span class="line">          &#125; else if (category2id) &#123;</span><br><span class="line">            location.query.categoryid = category2id;</span><br><span class="line">          &#125; else &#123;</span><br><span class="line">            location.query.categoryid = category3id;</span><br><span class="line">          &#125;</span><br><span class="line">          this.$router.push(location);</span><br><span class="line">        &#125;</span><br><span class="line">        //#endregion</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">//header.vue</span><br><span class="line">goSearch() &#123;</span><br><span class="line">    </span><br><span class="line">    const location=&#123;name:&#x27;search&#x27;&#125;</span><br><span class="line"></span><br><span class="line">    if (this.$route.query) &#123;</span><br><span class="line">      // this.$router.push(&#x27;/search/&#x27;+this.keyword+&#x27;?keywordQ=&#x27;+this.keyword)</span><br><span class="line">     </span><br><span class="line">      location.params=&#123; keyword: this.keyword || undefined &#125;</span><br><span class="line">      location.query=this.$route.query</span><br><span class="line">    &#125;else&#123;</span><br><span class="line">      location.params=&#123; keyword: this.keyword || undefined &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    this.$router.push(location)</span><br><span class="line">    this.keyword = &quot;&quot;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure><h2 id="mockjs"><a href="#mockjs" class="headerlink" title="mockjs"></a>mockjs</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230102151821406.png" alt="image-20230102151821406" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230102152753412.png" alt="image-20230102152753412" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230102152838128.png" alt="image-20230102152838128" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="swiper"><a href="#swiper" class="headerlink" title="swiper"></a>swiper</h2><p>1.引包 js css</p><p>2.加入dom元素</p><p>3.初始化swiper实例 注意 必须先引入dom再初始化</p><p>遇到的问题</p><p>在Mounted中初始化swiper 无效 原因是mounted同步执行 轮播图图片数据是异步请求的 导致了先初始化swiper 后加载了v-for循环的dom解构</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">//swiper5</span><br><span class="line">import &#x27;swiper/css/swiper.min.css&#x27;</span><br><span class="line">import Swiper from &quot;swiper&quot;;</span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">mounted() &#123;</span><br><span class="line">  </span><br><span class="line"></span><br><span class="line"></span><br><span class="line">     var mySwiper = new Swiper(&quot;.swiper-container&quot;, &#123;</span><br><span class="line">       loop: true, // 循环模式选项</span><br><span class="line">       autoplay:true,</span><br><span class="line">       // 如果需要分页器</span><br><span class="line">       pagination: &#123;</span><br><span class="line">         el: &quot;.swiper-pagination&quot;,</span><br><span class="line">         clickable:true</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       // 如果需要前进后退按钮</span><br><span class="line">       navigation: &#123;</span><br><span class="line">         nextEl: &quot;.swiper-button-next&quot;,</span><br><span class="line">         prevEl: &quot;.swiper-button-prev&quot;,</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       // 如果需要滚动条</span><br><span class="line">       scrollbar: &#123;</span><br><span class="line">         el: &quot;.swiper-scrollbar&quot;,</span><br><span class="line">       &#125;,</span><br><span class="line">     &#125;);</span><br><span class="line"> </span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure><p>解决办法1</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">mounted() &#123;</span><br><span class="line">   setTimeout(() =&gt; &#123;</span><br><span class="line">     var mySwiper = new Swiper(&quot;.swiper-container&quot;, &#123;</span><br><span class="line">       loop: true, // 循环模式选项</span><br><span class="line">       autoplay:true,</span><br><span class="line">       // 如果需要分页器</span><br><span class="line">       pagination: &#123;</span><br><span class="line">         el: &quot;.swiper-pagination&quot;,</span><br><span class="line">         clickable:true</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       // 如果需要前进后退按钮</span><br><span class="line">       navigation: &#123;</span><br><span class="line">         nextEl: &quot;.swiper-button-next&quot;,</span><br><span class="line">         prevEl: &quot;.swiper-button-prev&quot;,</span><br><span class="line">       &#125;,</span><br><span class="line"></span><br><span class="line">       // 如果需要滚动条</span><br><span class="line">       scrollbar: &#123;</span><br><span class="line">         el: &quot;.swiper-scrollbar&quot;,</span><br><span class="line">       &#125;,</span><br><span class="line">     &#125;);</span><br><span class="line">   &#125;, 1500);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">   </span><br><span class="line"> &#125;,</span><br></pre></td></tr></table></figure><p>这种方法会导致延迟</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">updated()&#123;</span><br><span class="line"> var mySwiper = new Swiper(&quot;.swiper-container&quot;, &#123;</span><br><span class="line">        loop: true, // 循环模式选项</span><br><span class="line">        autoplay:true,</span><br><span class="line">        // 如果需要分页器</span><br><span class="line">        pagination: &#123;</span><br><span class="line">          el: &quot;.swiper-pagination&quot;,</span><br><span class="line">          clickable:true</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        // 如果需要前进后退按钮</span><br><span class="line">        navigation: &#123;</span><br><span class="line">          nextEl: &quot;.swiper-button-next&quot;,</span><br><span class="line">          prevEl: &quot;.swiper-button-prev&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">        // 如果需要滚动条</span><br><span class="line">        scrollbar: &#123;</span><br><span class="line">          el: &quot;.swiper-scrollbar&quot;,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>这种方法也不可取 因为updated是页面更新完毕 一旦页面数据有变化 那么就执行一次 这个效率非常低</p><p>完美解决办法、：watch+$nextTick</p><p>watch数据监听 ： 监听已有数据的变化 监听服务器传回来的数据已经到了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103183239502.png" alt="image-20230103183239502" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>通过监听服务器传回来的数据是否从初始值变化了来判断数据是否已经传回来了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103183405707.png" alt="image-20230103183405707" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>但在此时 我们发现依然无法正常运行swiper插件 说明dom依然没有准备好 这是因为只是数据准备好了 但是v-for dom的循环并未完成</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103183851302.png" alt="image-20230103183851302" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>watch只是保证了服务器传回来的数据是否就绪</p><p>此时 我们使用$nextTick</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103183653591.png" alt="image-20230103183653591" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103183734065.png" alt="image-20230103183734065" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>$nextTick是在数据准备就绪 循环结构结束之后 调用回调 获取更新后的dom进行操作</p><p>总结：</p><p>nextTick 常用在操作dom需要dom准备好 依赖于dom改变 vue不会数据一改变就立马更新dom</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103184311649.png" alt="image-20230103184311649" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230103184417532.png" alt="image-20230103184417532" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="Search组件"><a href="#Search组件" class="headerlink" title="Search组件"></a>Search组件</h2><h3 id="Object-assign合并对象"><a href="#Object-assign合并对象" class="headerlink" title="Object.assign合并对象"></a>Object.assign合并对象</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">// this.searchParams=&#123;</span><br><span class="line">//   ...this.searchParams,</span><br><span class="line">//   ...this.$route.query,</span><br><span class="line">//   ...this.$route.params</span><br><span class="line">// &#125;</span><br><span class="line">this.searchParams=Object.assign(this.searchParams,this.$route.query,this.$route.params)</span><br></pre></td></tr></table></figure><h3 id="多次请求search数据"><a href="#多次请求search数据" class="headerlink" title="多次请求search数据"></a>多次请求search数据</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230105213629484.png" alt="image-20230105213629484" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>由于无论是从搜索框进入 还是从导航栏进入Search组件 再次在Search组件内进入Search 组件都没有销毁 所以Search组件挂载生命周期只发生了一次 当在这个search组件内再次从搜索框或者导航栏搜索数据时 也就不发请求 获取不到新的数据</p><p>此时 无论是搜索还是导航变化 都会使$route发生变化 可以监听$route的变化 vue底层在路由变化时将整个 $router这个对象整个替换了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230105213230478.png" alt="image-20230105213230478" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">watch: &#123;</span><br><span class="line">  $route() &#123;</span><br><span class="line">    //  注意 无论是从搜索框进入 还是从导航栏进入Search组件  再次在Search组件内进入Search 组件</span><br><span class="line">    //都没有销毁 所以挂载只发生了一次</span><br><span class="line">    //当路由发生变化 整理参数</span><br><span class="line">    this.searchParams = Object.assign(</span><br><span class="line">      this.searchParams,</span><br><span class="line">      this.$route.query,</span><br><span class="line">      this.$route.params</span><br><span class="line">    );</span><br><span class="line">    this.getSearchData();</span><br><span class="line"></span><br><span class="line">    //如果从一级导航进入页面  又从导航选了三级导航 那么上一次一级导航的id不会清除  所以请求完先置空</span><br><span class="line">    this.searchParams.category1Id = &quot;&quot;;</span><br><span class="line">    this.searchParams.category2Id = &quot;&quot;;</span><br><span class="line">    this.searchParams.category3Id = &quot;&quot;;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure><h3 id="请求携带的数据如果置于undefined-那么请求就不会携带这个参数-而’’-空串还是携带"><a href="#请求携带的数据如果置于undefined-那么请求就不会携带这个参数-而’’-空串还是携带" class="headerlink" title="请求携带的数据如果置于undefined 那么请求就不会携带这个参数 而’’ 空串还是携带"></a>请求携带的数据如果置于undefined 那么请求就不会携带这个参数 而’’ 空串还是携带</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230105235947213.png" alt="image-20230105235947213" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230106000014752.png" alt="image-20230106000014752" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230106000029936.png" alt="image-20230106000029936" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230106000048437.png" alt="image-20230106000048437" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这有利于网络性能 、</p><p>注意 置于null则还是会携带</p><h3 id="导航栏的面包屑关闭后浏览器还是有参数留着"><a href="#导航栏的面包屑关闭后浏览器还是有参数留着" class="headerlink" title="导航栏的面包屑关闭后浏览器还是有参数留着"></a>导航栏的面包屑关闭后浏览器还是有参数留着</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230106000233542.png" alt="image-20230106000233542" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>解决办法就是自己跳转自己</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">//直接自己跳转自己 把浏览器地址栏的query参数清理  但别清理params参数 </span><br><span class="line">this.$router.push(&#123;name:&#x27;search&#x27;,params:this.$route.params&#125;)</span><br></pre></td></tr></table></figure><h2 id="pagenation-分页器模块"><a href="#pagenation-分页器模块" class="headerlink" title="pagenation 分页器模块"></a>pagenation 分页器模块</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230109122436958.png" alt="image-20230109122436958" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230109122504797.png" alt="image-20230109122504797" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/uTools_1673241891874.png" alt="uTools_1673241891874" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="跳转路由时的滚动条问题"><a href="#跳转路由时的滚动条问题" class="headerlink" title="跳转路由时的滚动条问题"></a>跳转路由时的滚动条问题</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/dcxz.gif" alt="dcxz" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>跳转到另一个路由 本应该是在顶部默认的 但是由于是单页面应用 滚动条没有动</p><h3 id="滚动行为"><a href="#滚动行为" class="headerlink" title="滚动行为"></a>滚动行为</h3><p>使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 <code>vue-router</code> 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。</p><p><strong>注意: 这个功能只在支持 <code>history.pushState</code> 的浏览器中可用。</strong></p><p>当创建一个 Router 实例，你可以提供一个 <code>scrollBehavior</code> 方法：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> router = <span class="keyword">new</span> <span class="title class_">VueRouter</span>(&#123;</span><br><span class="line">  <span class="attr">routes</span>: [...],</span><br><span class="line">  scrollBehavior (to, <span class="keyword">from</span>, savedPosition) &#123;</span><br><span class="line">    <span class="comment">// return 期望滚动到哪个的位置</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure><p><code>scrollBehavior</code> 方法接收 <code>to</code> 和 <code>from</code> 路由对象。第三个参数 <code>savedPosition</code> 当且仅当 <code>popstate</code> 导航 (<strong>通过浏览器的 前进&#x2F;后退 按钮触发</strong>) 时才可用。</p><p>这个方法返回滚动位置的对象信息，长这样：</p><ul><li><code>&#123; x: number, y: number &#125;</code></li><li><code>&#123; selector: string, offset? : &#123; x: number, y: number &#125;&#125;</code> (offset 只在 2.6.0+ 支持)</li></ul><p>如果返回一个 falsy (译者注：falsy 不是 <code>false</code>，<a target="_blank" rel="noopener" href="https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy">参考这里 (opens new window)</a>)的值，或者是一个空对象，那么不会发生滚动。</p><p>举例：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">scrollBehavior (to, <span class="keyword">from</span>, savedPosition) &#123;</span><br><span class="line">  <span class="keyword">return</span> &#123; <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>对于所有路由导航，简单地让页面滚动到顶部。</p><p>返回 <code>savedPosition</code>，在按下 后退&#x2F;前进 按钮时，就会像浏览器的原生表现那样：<code>savedPosition</code><strong>储存了上一次浏览的位置信息</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">scrollBehavior (to, <span class="keyword">from</span>, savedPosition) &#123;</span><br><span class="line">  <span class="keyword">if</span> (savedPosition) &#123;</span><br><span class="line">    <span class="keyword">return</span> savedPosition</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123; <span class="attr">x</span>: <span class="number">0</span>, <span class="attr">y</span>: <span class="number">0</span> &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>如果你要模拟“滚动到锚点”的行为：</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">scrollBehavior (to, <span class="keyword">from</span>, savedPosition) &#123;</span><br><span class="line">  <span class="keyword">if</span> (to.<span class="property">hash</span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">selector</span>: to.<span class="property">hash</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">滚动到顶部</span><br><span class="line">scrollBehavior (to, from, savedPosition) &#123;</span><br><span class="line">  return &#123; y: 0 &#125;</span><br><span class="line">&#125;</span><br><span class="line">数值表示离顶部0px</span><br></pre></td></tr></table></figure><h2 id="vuex里getters一开始属性找不到问题"><a href="#vuex里getters一开始属性找不到问题" class="headerlink" title="vuex里getters一开始属性找不到问题"></a>vuex里getters一开始属性找不到问题</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230109205250657.png" alt="image-20230109205250657" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>一开始 由于state里的数据是一个异步的 一上来getters里的数据都是undefined 如果使用undefiened点就会报错 可以传一个对象 对象点出来undefined不会报错</p><h2 id="数字输入的验证"><a href="#数字输入的验证" class="headerlink" title="数字输入的验证"></a>数字输入的验证</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110172757013.png" alt="image-20230110172757013" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>v-model不能转化非数字和负值 这是不符合我们期望的</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110174724345.png" alt="image-20230110174724345" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="dispatch-可以返回值-如果是async-那么返回的就是promise对象"><a href="#dispatch-可以返回值-如果是async-那么返回的就是promise对象" class="headerlink" title="dispatch 可以返回值  如果是async 那么返回的就是promise对象"></a>dispatch 可以返回值 如果是async 那么返回的就是promise对象</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110201659245.png" alt="image-20230110201659245" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110201728343.png" alt="image-20230110201728343" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>说白了dispatch就是调用actions里的函数</p><h2 id="加入购物车时获得商品信息没必要再次发请求或者路由传参了"><a href="#加入购物车时获得商品信息没必要再次发请求或者路由传参了" class="headerlink" title="加入购物车时获得商品信息没必要再次发请求或者路由传参了"></a>加入购物车时获得商品信息没必要再次发请求或者路由传参了</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110203017530.png" alt="image-20230110203017530" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>已经发过了 路由传参带的参数太多了 传的对象 JSONstring不方便 不如直接存session</p><h3 id="HTML5新增了的内容"><a href="#HTML5新增了的内容" class="headerlink" title="HTML5新增了的内容"></a>HTML5新增了的内容</h3><p>新标签：main nav header footer</p><p>新增了css动画：animation transition</p><p>新增了多媒体功能:audio vidieo</p><p>新增了画布：canvas</p><p>新增了 websoket</p><p>新增了本地存储 和会话存储功能</p><p>本地存储 ：持久化的 但是有存储上限5M</p><p>会话存储：非持久化的 浏览器关闭后即数据消失</p><p>无论是本地存储还是会话存储都是存的字符串 对象需要先变成字符串存储 Json.stringfy</p><p>sessionStorage.setItem(“名”,值)</p><h2 id="axios请求拦截器中设置请求头携带数据"><a href="#axios请求拦截器中设置请求头携带数据" class="headerlink" title="axios请求拦截器中设置请求头携带数据"></a>axios请求拦截器中设置请求头携带数据</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110220821092.png" alt="image-20230110220821092" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="全选"><a href="#全选" class="headerlink" title="全选"></a>全选</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230110224045967.png" alt="image-20230110224045967" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="后台接口文档使用的是swagger"><a href="#后台接口文档使用的是swagger" class="headerlink" title="后台接口文档使用的是swagger"></a>后台接口文档使用的是swagger</h2><h2 id="导航守卫"><a href="#导航守卫" class="headerlink" title="导航守卫"></a>导航守卫</h2><p>没有token那就不能进入购物车 登录后不能再登录</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113170140494.png" alt="image-20230113170140494" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="用户登录路由导航"><a href="#用户登录路由导航" class="headerlink" title="用户登录路由导航"></a>用户登录路由导航</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113194441071.png" alt="image-20230113194441071" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>之前 我们是在home组件中派发请求获取用户信息 将用户信息存储在了vuex里 但如果我们当前路由在非home组件 重新刷新页面 那么vuex就会清空 而此时又不在home组件 也就没有发请求 也就没有用户信息</p><p>假如我们将请求放在App组件mounted里 那么问题更大 页面一上来 组件挂载完毕 mounted只执行了一次 登陆完后 App的moutend也不会再执行了</p><p>可以在路由守卫里来派发请求</p><h2 id="数组find方法"><a href="#数组find方法" class="headerlink" title="数组find方法"></a>数组find方法</h2><p>find方法<br>基础参数说明： arrary.find(function(item,index,arr),thisvalue);<br>array:数组。 item:当前循环的项。 index:循环项的下标 。 arr：当前循环的数组。 thisvalue：如果传的话，在callbck函数中this为该值，不传的话this为undefined。**</p><p>方法特性： **会返回数组中符合条件的第一个值，在数组中找到的话则不会往下执行。 如果数组中没有符合条件的值则返回undefined **<br>在find方法执行之后，给数组新增值是访问不到的。 在callback还未访问到某个值是如果改变某一个值那么当callback访问到他时，将是新的值。 如果在find方法执行后删除某个值还是会访问到他。</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">var array = [1, 2, 3, 4, 5, 6, 6, 6]</span><br><span class="line">       var result = array.find(function (item, index, arr) &#123;</span><br><span class="line">           console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]</span><br><span class="line">           return item &gt; 6;</span><br><span class="line">       &#125;, array)</span><br><span class="line">       console.log(result); // undefined</span><br><span class="line">       console.log(array);  //[1, 2, 3, 4, 5, 6, 6, 6]</span><br><span class="line"></span><br><span class="line">  var result = array.find(function (item, index, arr) &#123;</span><br><span class="line">           console.log(this); // [1, 2, 3, 4, 5, 6, 6, 6]</span><br><span class="line">           return item &gt; 5;</span><br><span class="line">       &#125;, array)</span><br><span class="line">       console.log(result); // 6</span><br><span class="line">       console.log(array);  //[1, 2, 3, 4, 5, 6, 6, 6]</span><br><span class="line"></span><br></pre></td></tr></table></figure><h2 id="请求api统一处理"><a href="#请求api统一处理" class="headerlink" title="请求api统一处理"></a>请求api统一处理</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113202748249.png" alt="image-20230113202748249" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113202804818.png" alt="image-20230113202804818" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113202947818.png" alt="image-20230113202947818" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="不要在生命周期函数中使用async"><a href="#不要在生命周期函数中使用async" class="headerlink" title="不要在生命周期函数中使用async"></a>不要在生命周期函数中使用async</h2><h2 id="elementUI基本使用"><a href="#elementUI基本使用" class="headerlink" title="elementUI基本使用"></a>elementUI基本使用</h2><h3 id="完整引入"><a href="#完整引入" class="headerlink" title="完整引入"></a>完整引入</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i element-ui -S</span><br></pre></td></tr></table></figure><p>cdn</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 引入样式 --&gt;</span><br><span class="line">&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/element-ui/lib/theme-chalk/index.css&quot;&gt;</span><br><span class="line">&lt;!-- 引入组件库 --&gt;</span><br><span class="line">&lt;script src=&quot;https://unpkg.com/element-ui/lib/index.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure><p>在 main.js 中写入以下内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">ElementUI</span> <span class="keyword">from</span> <span class="string">&#x27;element-ui&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;element-ui/lib/theme-chalk/index.css&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">ElementUI</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。</p><h3 id="按需引入"><a href="#按需引入" class="headerlink" title="按需引入"></a>按需引入</h3><p>借助 <a target="_blank" rel="noopener" href="https://github.com/QingWei-Li/babel-plugin-component">babel-plugin-component</a>，我们可以只引入需要的组件，以达到减小项目体积的目的。</p><p>首先，安装 babel-plugin-component：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-plugin-component -D</span><br></pre></td></tr></table></figure><p>然后，将 .babelrc （vue中为babel.config.js）修改为：</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="punctuation">&#123;</span></span><br><span class="line">  <span class="attr">&quot;presets&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span><span class="punctuation">[</span><span class="string">&quot;es2015&quot;</span><span class="punctuation">,</span> <span class="punctuation">&#123;</span> <span class="attr">&quot;modules&quot;</span><span class="punctuation">:</span> <span class="literal"><span class="keyword">false</span></span> <span class="punctuation">&#125;</span><span class="punctuation">]</span><span class="punctuation">]</span><span class="punctuation">,</span></span><br><span class="line">  <span class="attr">&quot;plugins&quot;</span><span class="punctuation">:</span> <span class="punctuation">[</span></span><br><span class="line">    <span class="punctuation">[</span></span><br><span class="line">      <span class="string">&quot;component&quot;</span><span class="punctuation">,</span></span><br><span class="line">      <span class="punctuation">&#123;</span></span><br><span class="line">        <span class="attr">&quot;libraryName&quot;</span><span class="punctuation">:</span> <span class="string">&quot;element-ui&quot;</span><span class="punctuation">,</span></span><br><span class="line">        <span class="attr">&quot;styleLibraryName&quot;</span><span class="punctuation">:</span> <span class="string">&quot;theme-chalk&quot;</span></span><br><span class="line">      <span class="punctuation">&#125;</span></span><br><span class="line">    <span class="punctuation">]</span></span><br><span class="line">  <span class="punctuation">]</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><p>接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123; <span class="title class_">Button</span>, <span class="title class_">Select</span> &#125; <span class="keyword">from</span> <span class="string">&#x27;element-ui&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="title class_">Button</span>.<span class="property">name</span>, <span class="title class_">Button</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">component</span>(<span class="title class_">Select</span>.<span class="property">name</span>, <span class="title class_">Select</span>);</span><br><span class="line"><span class="comment">/* 或写为</span></span><br><span class="line"><span class="comment"> * Vue.use(Button)</span></span><br><span class="line"><span class="comment"> * Vue.use(Select)</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title class_">Vue</span>(&#123;</span><br><span class="line">  <span class="attr">el</span>: <span class="string">&#x27;#app&#x27;</span>,</span><br><span class="line">  <span class="attr">render</span>: <span class="function"><span class="params">h</span> =&gt;</span> <span class="title function_">h</span>(<span class="title class_">App</span>)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure><p>完整组件列表和引入方式（完整组件列表以 <a target="_blank" rel="noopener" href="https://github.com/ElemeFE/element/blob/master/components.json">components.json</a> 为准）</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span>;</span><br><span class="line"><span class="keyword">import</span> &#123;</span><br><span class="line">  <span class="title class_">Pagination</span>,</span><br><span class="line">  <span class="title class_">Dialog</span>,</span><br><span class="line">  <span class="title class_">Autocomplete</span>,</span><br><span class="line">  <span class="title class_">Dropdown</span>,</span><br><span class="line">  <span class="title class_">DropdownMenu</span>,</span><br><span class="line">  <span class="title class_">DropdownItem</span>,</span><br><span class="line">  <span class="title class_">Menu</span>,</span><br><span class="line">  <span class="title class_">Submenu</span>,</span><br><span class="line">  <span class="title class_">MenuItem</span>,</span><br><span class="line">  <span class="title class_">MenuItemGroup</span>,</span><br><span class="line">  <span class="title class_">Input</span>,</span><br><span class="line">  <span class="title class_">InputNumber</span>,</span><br><span class="line">  <span class="title class_">Radio</span>,</span><br><span class="line">  <span class="title class_">RadioGroup</span>,</span><br><span class="line">  <span class="title class_">RadioButton</span>,</span><br><span class="line">  <span class="title class_">Checkbox</span>,</span><br><span class="line">  <span class="title class_">CheckboxButton</span>,</span><br><span class="line">  <span class="title class_">CheckboxGroup</span>,</span><br><span class="line">  <span class="title class_">Switch</span>,</span><br><span class="line">  <span class="title class_">Select</span>,</span><br><span class="line">  <span class="title class_">Option</span>,</span><br><span class="line">  <span class="title class_">OptionGroup</span>,</span><br><span class="line">  <span class="title class_">Button</span>,</span><br><span class="line">  <span class="title class_">ButtonGroup</span>,</span><br><span class="line">  <span class="title class_">Table</span>,</span><br><span class="line">  <span class="title class_">TableColumn</span>,</span><br><span class="line">  <span class="title class_">DatePicker</span>,</span><br><span class="line">  <span class="title class_">TimeSelect</span>,</span><br><span class="line">  <span class="title class_">TimePicker</span>,</span><br><span class="line">  <span class="title class_">Popover</span>,</span><br><span class="line">  <span class="title class_">Tooltip</span>,</span><br><span class="line">  <span class="title class_">Breadcrumb</span>,</span><br><span class="line">  <span class="title class_">BreadcrumbItem</span>,</span><br><span class="line">  <span class="title class_">Form</span>,</span><br><span class="line">  <span class="title class_">FormItem</span>,</span><br><span class="line">  <span class="title class_">Tabs</span>,</span><br><span class="line">  <span class="title class_">TabPane</span>,</span><br><span class="line">  <span class="title class_">Tag</span>,</span><br><span class="line">  <span class="title class_">Tree</span>,</span><br><span class="line">  <span class="title class_">Alert</span>,</span><br><span class="line">  <span class="title class_">Slider</span>,</span><br><span class="line">  <span class="title class_">Icon</span>,</span><br><span class="line">  <span class="title class_">Row</span>,</span><br><span class="line">  <span class="title class_">Col</span>,</span><br><span class="line">  <span class="title class_">Upload</span>,</span><br><span class="line">  <span class="title class_">Progress</span>,</span><br><span class="line">  <span class="title class_">Spinner</span>,</span><br><span class="line">  <span class="title class_">Badge</span>,</span><br><span class="line">  <span class="title class_">Card</span>,</span><br><span class="line">  <span class="title class_">Rate</span>,</span><br><span class="line">  <span class="title class_">Steps</span>,</span><br><span class="line">  <span class="title class_">Step</span>,</span><br><span class="line">  <span class="title class_">Carousel</span>,</span><br><span class="line">  <span class="title class_">CarouselItem</span>,</span><br><span class="line">  <span class="title class_">Collapse</span>,</span><br><span class="line">  <span class="title class_">CollapseItem</span>,</span><br><span class="line">  <span class="title class_">Cascader</span>,</span><br><span class="line">  <span class="title class_">ColorPicker</span>,</span><br><span class="line">  <span class="title class_">Transfer</span>,</span><br><span class="line">  <span class="title class_">Container</span>,</span><br><span class="line">  <span class="title class_">Header</span>,</span><br><span class="line">  <span class="title class_">Aside</span>,</span><br><span class="line">  <span class="title class_">Main</span>,</span><br><span class="line">  <span class="title class_">Footer</span>,</span><br><span class="line">  <span class="title class_">Timeline</span>,</span><br><span class="line">  <span class="title class_">TimelineItem</span>,</span><br><span class="line">  <span class="title class_">Link</span>,</span><br><span class="line">  <span class="title class_">Divider</span>,</span><br><span class="line">  <span class="title class_">Image</span>,</span><br><span class="line">  <span class="title class_">Calendar</span>,</span><br><span class="line">  <span class="title class_">Backtop</span>,</span><br><span class="line">  <span class="title class_">PageHeader</span>,</span><br><span class="line">  <span class="title class_">CascaderPanel</span>,</span><br><span class="line">  <span class="title class_">Loading</span>,</span><br><span class="line">  <span class="title class_">MessageBox</span>,</span><br><span class="line">  <span class="title class_">Message</span>,</span><br><span class="line">  <span class="title class_">Notification</span></span><br><span class="line">&#125; <span class="keyword">from</span> <span class="string">&#x27;element-ui&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Pagination</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Dialog</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Autocomplete</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Dropdown</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">DropdownMenu</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">DropdownItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Menu</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Submenu</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">MenuItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">MenuItemGroup</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Input</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">InputNumber</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Radio</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">RadioGroup</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">RadioButton</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Checkbox</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">CheckboxButton</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">CheckboxGroup</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Switch</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Select</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Option</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">OptionGroup</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Button</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">ButtonGroup</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Table</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">TableColumn</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">DatePicker</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">TimeSelect</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">TimePicker</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Popover</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Tooltip</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Breadcrumb</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">BreadcrumbItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Form</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">FormItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Tabs</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">TabPane</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Tag</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Tree</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Alert</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Slider</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Icon</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Row</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Col</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Upload</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Progress</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Spinner</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Badge</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Card</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Rate</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Steps</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Step</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Carousel</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">CarouselItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Collapse</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">CollapseItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Cascader</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">ColorPicker</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Transfer</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Container</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Header</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Aside</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Main</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Footer</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Timeline</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">TimelineItem</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Link</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Divider</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Image</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Calendar</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Backtop</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">PageHeader</span>);</span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">CascaderPanel</span>);</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="title function_">use</span>(<span class="title class_">Loading</span>.<span class="property">directive</span>);</span><br><span class="line"></span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$loading</span> = <span class="title class_">Loading</span>.<span class="property">service</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$msgbox</span> = <span class="title class_">MessageBox</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$alert</span> = <span class="title class_">MessageBox</span>.<span class="property">alert</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$confirm</span> = <span class="title class_">MessageBox</span>.<span class="property">confirm</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$prompt</span> = <span class="title class_">MessageBox</span>.<span class="property">prompt</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$notify</span> = <span class="title class_">Notification</span>;</span><br><span class="line"><span class="title class_">Vue</span>.<span class="property"><span class="keyword">prototype</span></span>.<span class="property">$message</span> = <span class="title class_">Message</span>;</span><br></pre></td></tr></table></figure><p>安装一个vscode插件 vue-helper 可以提示所有组件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113205209381.png" alt="image-20230113205209381" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="qrcode包可以生成二维码-支付逻辑"><a href="#qrcode包可以生成二维码-支付逻辑" class="headerlink" title="qrcode包可以生成二维码 支付逻辑"></a>qrcode包可以生成二维码 支付逻辑</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113210724795.png" alt="image-20230113210724795" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113211218340.png" alt="image-20230113211218340" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113211452949.png" alt="image-20230113211452949" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line">import QRCode from &quot;qrcode&quot;;</span><br><span class="line">export default &#123;</span><br><span class="line">  name: &quot;Pay&quot;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      payInfo: &#123;&#125;,</span><br><span class="line">      timer: null,</span><br><span class="line">      //支付状态码</span><br><span class="line">      code: &quot;&quot;,</span><br><span class="line">    &#125;;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed: &#123;</span><br><span class="line">    orderId() &#123;</span><br><span class="line">      return this.$route.query.orderId;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">  //工作的时候：尽量别再生命周期函数中async|await</span><br><span class="line">  mounted() &#123;</span><br><span class="line">    this.getPayInfo();</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    //获取支付信息</span><br><span class="line">    async getPayInfo() &#123;</span><br><span class="line">      let result = await this.$API.reqPayInfo(this.orderId);</span><br><span class="line">      //如果成功：组件当中存储支付信息</span><br><span class="line">      if (result.code == 200) &#123;</span><br><span class="line">        this.payInfo = result.data;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    //弹出框</span><br><span class="line">    async open() &#123;</span><br><span class="line">      //生成二维(地址)</span><br><span class="line">      let url = await QRCode.toDataURL(this.payInfo.codeUrl);</span><br><span class="line">      this.$alert(`&lt;img src=$&#123;url&#125; /&gt;`, &quot;请你微信支付&quot;, &#123;</span><br><span class="line">        dangerouslyUseHTMLString: true,</span><br><span class="line">        //中间布局</span><br><span class="line">        center: true,</span><br><span class="line">        //是否显示取消按钮</span><br><span class="line">        showCancelButton: true,</span><br><span class="line">        //取消按钮的文本内容</span><br><span class="line">        cancelButtonText: &quot;支付遇见问题&quot;,</span><br><span class="line">        //确定按钮的文本</span><br><span class="line">        confirmButtonText: &quot;已支付成功&quot;,</span><br><span class="line">        //右上角的叉子没了</span><br><span class="line">        showClose: false,</span><br><span class="line">        //关闭弹出框的配置值</span><br><span class="line">        beforeClose: (type, instance, done) =&gt; &#123;</span><br><span class="line">          //type:区分取消|确定按钮</span><br><span class="line">          //instance：当前组件实例</span><br><span class="line">          //done:关闭弹出框的方法</span><br><span class="line">          if (type == &quot;cancel&quot;) &#123;</span><br><span class="line">            alert(&quot;请联系管理员豪哥&quot;);</span><br><span class="line">            //清除定时器</span><br><span class="line">            clearInterval(this.timer);</span><br><span class="line">            this.timer = null;</span><br><span class="line">            //关闭弹出框</span><br><span class="line">            done();</span><br><span class="line">          &#125; else &#123;</span><br><span class="line">            //判断是否真的支付了</span><br><span class="line">            //开发人员：为了自己方便，这里判断先不要了</span><br><span class="line">            // if (this.code == 200) &#123;</span><br><span class="line">              clearInterval(this.timer);</span><br><span class="line">              this.timer = null;</span><br><span class="line">              done();</span><br><span class="line">              this.$router.push(&quot;/paysuccess&quot;);</span><br><span class="line">            // &#125;</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;);</span><br><span class="line">      //你需要知道支付成功|失败</span><br><span class="line">      //支付成功，路由的跳转，如果支付失败，提示信息</span><br><span class="line">      //定时器没有，开启一个新的定时器</span><br><span class="line">      if (!this.timer) &#123;</span><br><span class="line">        this.timer = setInterval(async () =&gt; &#123;</span><br><span class="line">          //发请求获取用户支付状态</span><br><span class="line">          let result = await this.$API.reqPayStatus(this.orderId);</span><br><span class="line">          //如果code==200</span><br><span class="line">          if (result.code == 200) &#123;</span><br><span class="line">            //第一步：清除定时器</span><br><span class="line">            clearInterval(this.timer);</span><br><span class="line">            this.timer = null;</span><br><span class="line">            //保存支付成功返回的code</span><br><span class="line">            this.code = result.code;</span><br><span class="line">            //关闭弹出框</span><br><span class="line">            this.$msgbox.close();</span><br><span class="line">            //跳转到下一路由</span><br><span class="line">            this.$router.push(&quot;/paysuccess&quot;);</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;, 1000);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure><h2 id="vuerouter一级路由必须写全路径二级则可以不写"><a href="#vuerouter一级路由必须写全路径二级则可以不写" class="headerlink" title="vuerouter一级路由必须写全路径二级则可以不写&#x2F;"></a>vuerouter一级路由必须写全路径二级则可以不写&#x2F;</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113225535235.png" alt="image-20230113225535235" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113225747260.png" alt="image-20230113225747260" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="没登录从未登录的页面跳转到登录页面登录完再跳转回去"><a href="#没登录从未登录的页面跳转到登录页面登录完再跳转回去" class="headerlink" title="没登录从未登录的页面跳转到登录页面登录完再跳转回去"></a>没登录从未登录的页面跳转到登录页面登录完再跳转回去</h2><p>可以在路由守卫从需要登录的页面（支付 个人订单等）跳转到登录时的路由记录下来 写到query参数中 以便在需要的时候拿到query参数 跳转到原来的路由页面</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113232420025.png" alt="image-20230113232420025" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113232146539.png" alt="image-20230113232146539" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113232302699.png" alt="image-20230113232302699" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="路由独享守卫-解决支付等页面必须从下订单界面才能进入的问题"><a href="#路由独享守卫-解决支付等页面必须从下订单界面才能进入的问题" class="headerlink" title="路由独享守卫 解决支付等页面必须从下订单界面才能进入的问题"></a>路由独享守卫 解决支付等页面必须从下订单界面才能进入的问题</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113232848793.png" alt="image-20230113232848793" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>全局守卫 有点像紫禁城大门 谁都得查验</p><p>路由独享守卫 像皇帝门前的守卫 只能从指定位置进入</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113233853724.png" alt="image-20230113233853724" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>next（false）从哪里来回哪里去 比如用户手动输入url改变的路由或者浏览器的前进后退事件</p><h2 id="图片懒加载"><a href="#图片懒加载" class="headerlink" title="图片懒加载"></a>图片懒加载</h2><p>vue-lazyload插件</p><p>具体使用查看npm文档</p><h2 id="图片和JSON数据是默认暴露的-可以直接默认引入"><a href="#图片和JSON数据是默认暴露的-可以直接默认引入" class="headerlink" title="图片和JSON数据是默认暴露的 可以直接默认引入"></a>图片和JSON数据是默认暴露的 可以直接默认引入</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230113235752803.png" alt="image-20230113235752803" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="Vue插件的使用-除了第一个参数是Vue构造函数-还可以传自己的参数"><a href="#Vue插件的使用-除了第一个参数是Vue构造函数-还可以传自己的参数" class="headerlink" title="Vue插件的使用 除了第一个参数是Vue构造函数  还可以传自己的参数"></a>Vue插件的使用 除了第一个参数是Vue构造函数 还可以传自己的参数</h2><p>Vue插件必须默认暴露一个对象 里面有个install函数方法</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114000349566.png" alt="image-20230114000349566" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114000322224.png" alt="image-20230114000322224" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="项目打包处理map文件"><a href="#项目打包处理map文件" class="headerlink" title="项目打包处理map文件"></a>项目打包处理map文件</h2><p>由于打包后代码都压缩加密了 遇到报错不会输出 而map文件就是支持可以报错的 我们一般上线不需要再报错了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114190832378.png" alt="image-20230114190832378" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>可以在vueconfig里 设置不要map</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114190925882.png" alt="image-20230114190925882" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="自定义事件-组件绑定原生事件"><a href="#自定义事件-组件绑定原生事件" class="headerlink" title="自定义事件 组件绑定原生事件"></a>自定义事件 组件绑定原生事件</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114204543056.png" alt="image-20230114204543056" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>并不会触发 会解析成自定义事件 点击组件区域无效 需要加.native修饰符</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114204749137.png" alt="image-20230114204749137" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="v-model深入"><a href="#v-model深入" class="headerlink" title="v-model深入"></a>v-model深入</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114210357139.png" alt="image-20230114210357139" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>组件也可以使用v-model 这里的原理就是</p><h2 id="sync修饰符"><a href="#sync修饰符" class="headerlink" title="sync修饰符"></a>sync修饰符</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114220744609.png" alt="image-20230114220744609" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230114220804534.png" alt="image-20230114220804534" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>通过自定义事件和props实现了父子组件数据同步 类似v-model</p></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章 <span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/nuxt%E9%A1%B9%E7%9B%AE%E9%97%AE%E9%A2%98/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/">前端开发</a></div><h5><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/nuxt%E9%A1%B9%E7%9B%AE%E9%97%AE%E9%A2%98/" class="trm-anima-link">nuxt项目中遇到的问题</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/02/11</li><li>19:48</li></ul></div></div></div></div><div class="trm-divider footer-divider"></div><footer class="trm-scroll-animation"><div class="trm-footer-item"><span>© 2023- 2023</span> <span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">不情的歌</span></div><div class="trm-footer-item">博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天</div><div class="trm-footer-item">当你累的时候你是在走上坡路</div></footer><script>function show_date_time(){var e=new Date("10/07/2023 15:00:00"),t=(new Date).getTime()-e.getTime(),i=Math.floor(t/864e5);since.innerHTML=i}show_date_time()</script></div></div></div></div></div><div id="post-toc" class="trm-post-toc"><div class="trm-post-toc-header">目录导航</div><div class="trm-post-toc-content"><ol class="trm-toc"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#前期配置"><span class="trm-toc-number">1.</span> <span class="trm-toc-text">前期配置</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#重新封装axios-添加请求器拦截器等-请求接口api同一管理"><span class="trm-toc-number">2.</span> <span class="trm-toc-text">重新封装axios 添加请求器拦截器等 请求接口api同一管理</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#nprogress进度条"><span class="trm-toc-number">3.</span> <span class="trm-toc-text">nprogress进度条</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#多级目录跳转问题"><span class="trm-toc-number">4.</span> <span class="trm-toc-text">多级目录跳转问题</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#params传参问题"><span class="trm-toc-number">5.</span> <span class="trm-toc-text">params传参问题</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#配置params可传可不传"><span class="trm-toc-number">5.1.</span> <span class="trm-toc-text">配置params可传可不传</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#params参数可传可不传-如果传的参数值是空串-如何解决"><span class="trm-toc-number">5.2.</span> <span class="trm-toc-text">params参数可传可不传 如果传的参数值是空串 如何解决</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由的props配置"><span class="trm-toc-number">6.</span> <span class="trm-toc-text">路由的props配置</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#阻止表单默认提交事件"><span class="trm-toc-number">7.</span> <span class="trm-toc-text">阻止表单默认提交事件</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#多次重复传相同参数的跳转问题"><span class="trm-toc-number">8.</span> <span class="trm-toc-text">多次重复传相同参数的跳转问题</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#push-和-replace重写解决跳转当前路由（参数不变）-多次执行抛出navigationDuplicated-警告"><span class="trm-toc-number">8.1.</span> <span class="trm-toc-text">push 和 replace重写解决跳转当前路由（参数不变） 多次执行抛出navigationDuplicated 警告</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#Search组件里三联导航复用的显示隐藏两种思路"><span class="trm-toc-number">9.</span> <span class="trm-toc-text">Search组件里三联导航复用的显示隐藏两种思路</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#1-通过props属性来控制在不同组件中显示的状态"><span class="trm-toc-number">9.1.</span> <span class="trm-toc-text">1.通过props属性来控制在不同组件中显示的状态</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#2-通过this-route的path-路径来控制显示隐藏"><span class="trm-toc-number">9.2.</span> <span class="trm-toc-text">2.通过this.$route的path 路径来控制显示隐藏</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#动画过渡效果"><span class="trm-toc-number">9.3.</span> <span class="trm-toc-text">动画过渡效果</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#从搜索框与typenav两个不同地方进入search组件时参数丢失问题"><span class="trm-toc-number">10.</span> <span class="trm-toc-text">从搜索框与typenav两个不同地方进入search组件时参数丢失问题</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#mockjs"><span class="trm-toc-number">11.</span> <span class="trm-toc-text">mockjs</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#swiper"><span class="trm-toc-number">12.</span> <span class="trm-toc-text">swiper</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#Search组件"><span class="trm-toc-number">13.</span> <span class="trm-toc-text">Search组件</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#Object-assign合并对象"><span class="trm-toc-number">13.1.</span> <span class="trm-toc-text">Object.assign合并对象</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#多次请求search数据"><span class="trm-toc-number">13.2.</span> <span class="trm-toc-text">多次请求search数据</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#请求携带的数据如果置于undefined-那么请求就不会携带这个参数-而’’-空串还是携带"><span class="trm-toc-number">13.3.</span> <span class="trm-toc-text">请求携带的数据如果置于undefined 那么请求就不会携带这个参数 而’’ 空串还是携带</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#导航栏的面包屑关闭后浏览器还是有参数留着"><span class="trm-toc-number">13.4.</span> <span class="trm-toc-text">导航栏的面包屑关闭后浏览器还是有参数留着</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#pagenation-分页器模块"><span class="trm-toc-number">14.</span> <span class="trm-toc-text">pagenation 分页器模块</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#跳转路由时的滚动条问题"><span class="trm-toc-number">15.</span> <span class="trm-toc-text">跳转路由时的滚动条问题</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#滚动行为"><span class="trm-toc-number">15.1.</span> <span class="trm-toc-text">滚动行为</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#vuex里getters一开始属性找不到问题"><span class="trm-toc-number">16.</span> <span class="trm-toc-text">vuex里getters一开始属性找不到问题</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#数字输入的验证"><span class="trm-toc-number">17.</span> <span class="trm-toc-text">数字输入的验证</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#dispatch-可以返回值-如果是async-那么返回的就是promise对象"><span class="trm-toc-number">18.</span> <span class="trm-toc-text">dispatch 可以返回值 如果是async 那么返回的就是promise对象</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#加入购物车时获得商品信息没必要再次发请求或者路由传参了"><span class="trm-toc-number">19.</span> <span class="trm-toc-text">加入购物车时获得商品信息没必要再次发请求或者路由传参了</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#HTML5新增了的内容"><span class="trm-toc-number">19.1.</span> <span class="trm-toc-text">HTML5新增了的内容</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#axios请求拦截器中设置请求头携带数据"><span class="trm-toc-number">20.</span> <span class="trm-toc-text">axios请求拦截器中设置请求头携带数据</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#全选"><span class="trm-toc-number">21.</span> <span class="trm-toc-text">全选</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#后台接口文档使用的是swagger"><span class="trm-toc-number">22.</span> <span class="trm-toc-text">后台接口文档使用的是swagger</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#导航守卫"><span class="trm-toc-number">23.</span> <span class="trm-toc-text">导航守卫</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#用户登录路由导航"><span class="trm-toc-number">24.</span> <span class="trm-toc-text">用户登录路由导航</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#数组find方法"><span class="trm-toc-number">25.</span> <span class="trm-toc-text">数组find方法</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#请求api统一处理"><span class="trm-toc-number">26.</span> <span class="trm-toc-text">请求api统一处理</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#不要在生命周期函数中使用async"><span class="trm-toc-number">27.</span> <span class="trm-toc-text">不要在生命周期函数中使用async</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#elementUI基本使用"><span class="trm-toc-number">28.</span> <span class="trm-toc-text">elementUI基本使用</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#完整引入"><span class="trm-toc-number">28.1.</span> <span class="trm-toc-text">完整引入</span></a></li><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#按需引入"><span class="trm-toc-number">28.2.</span> <span class="trm-toc-text">按需引入</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#qrcode包可以生成二维码-支付逻辑"><span class="trm-toc-number">29.</span> <span class="trm-toc-text">qrcode包可以生成二维码 支付逻辑</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#vuerouter一级路由必须写全路径二级则可以不写"><span class="trm-toc-number">30.</span> <span class="trm-toc-text">vuerouter一级路由必须写全路径二级则可以不写&#x2F;</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#没登录从未登录的页面跳转到登录页面登录完再跳转回去"><span class="trm-toc-number">31.</span> <span class="trm-toc-text">没登录从未登录的页面跳转到登录页面登录完再跳转回去</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#路由独享守卫-解决支付等页面必须从下订单界面才能进入的问题"><span class="trm-toc-number">32.</span> <span class="trm-toc-text">路由独享守卫 解决支付等页面必须从下订单界面才能进入的问题</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#图片懒加载"><span class="trm-toc-number">33.</span> <span class="trm-toc-text">图片懒加载</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#图片和JSON数据是默认暴露的-可以直接默认引入"><span class="trm-toc-number">34.</span> <span class="trm-toc-text">图片和JSON数据是默认暴露的 可以直接默认引入</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#Vue插件的使用-除了第一个参数是Vue构造函数-还可以传自己的参数"><span class="trm-toc-number">35.</span> <span class="trm-toc-text">Vue插件的使用 除了第一个参数是Vue构造函数 还可以传自己的参数</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#项目打包处理map文件"><span class="trm-toc-number">36.</span> <span class="trm-toc-text">项目打包处理map文件</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#自定义事件-组件绑定原生事件"><span class="trm-toc-number">37.</span> <span class="trm-toc-text">自定义事件 组件绑定原生事件</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#v-model深入"><span class="trm-toc-number">38.</span> <span class="trm-toc-text">v-model深入</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#sync修饰符"><span class="trm-toc-number">39.</span> <span class="trm-toc-text">sync修饰符</span></a></li></ol></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn post-toc-btn" data-title="目录"><i class="iconfont fas fa-th-list"></i></div><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div class="trm-fixed-btn hidden-md" data-title="单栏和双栏切换" onclick="asyncFun.switchSingleColumn()"><i class="iconfont fas fa-arrows-alt-h"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="/xujianhu/js/plugins/typing.js?v=2.1.2"></script><script id="async-script" src="/xujianhu/js/main.js?v=2.1.2"></script><script src="/xujianhu/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>